﻿@{
    ViewBag.Title = "CompareProduct";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/bootstrap-select.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/tooltip.js")"></script>
<link href="@Url.Content("~/Content/css/bootstrap-select.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/bootstrap-select.min.css")" rel="stylesheet" type="text/css" />
<script language="javascript">
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4
    });
</script>
<div class="detail">
    <ul class="nav nav-tabs" role="tablist">
        <li><a href="#">Bảo hiểm Ô tô</a></li>
        <li><a href="#">Bảo hiểm xe máy</a></li>
        <li><a href="#">Bảo hiểm sức khoẻ</a></li>
        <li><a href="#">Bảo hiểm tai nạn</a></li>
        <li class="active"><a href="#">Bảo hiểm du lịch</a></li>
        <li><a href="#">Bảo hiểm nhà</a></li>
        <li><a href="#">Xử lý bồi thường</a></li>
        <li><a href="#">Dịch vụ khách hàng</a></li>
    </ul>
    <div style="margin: 10px 0 0 0; padding:0">
        <div class="col-sm-5 col-md-3 nav">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        BẢO HIỂM DU LỊCH QUỐC TẾ
                    </h3>
                </div>
                <div class="panel-body">
                    <ul class="nav-detail">
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Thông tin chung</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Quyền lợi bảo hiểm</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Biểu phí bảo hiểm</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Hướng dẫn bồi thường</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Kinh nghiệm, tư vấn</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Danh sách cơ sở y tế liên kết bảo lãnh viện phí</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Quy tắc bảo hiểm (FULL - HTML)</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Download quy tắc, biểu mẫu</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="#">Tính phí & đặt mua</a></li>
                        <li><span class="glyphicon glyphicon-play"></span><a href="@Url.Action("Index", "Compare")">So sánh sản phẩm</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-5 col-md-9 content">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        So sánh sản phẩm
                    </h3>
                </div>
                <div class="panel-body">
                    <table class="table no-boder reset-pad-mad">
                        <tr>
                            <td class="ver-mid">Chọn loại bảo hiểm</td>
                            <td>
                                <select class="selectpicker show-menu-arrow">
                                    <option>Bảo hiểm oto</option>
                                    <option>Bảo hiểm xe máy</option>
                                    <option>Bảo hiểm thân thể</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="ver-mid"></td>
                            <td class="text-right">
                                <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">So sánh</button>
                            </td>
                        </tr>
                    </table>
                    <ul class="list-group compare-prouduct-list" style="clear: both">
                        <li class="list-group-item list-group-item-info row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-warning row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-info row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-warning row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                         <li class="list-group-item list-group-item-info row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-warning row"  style="clear: both">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3 reset-pad-mad"><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")"/></div>
                                    <div class="col-md-9 text-mid">VND 2.000.000</div>
                                </div>
                                <div class="row"><h4>Bảo việt toàn diện mức 1</h4></div>
                            </div>
                            <div class="col-md-3">
                                <div class="row" style="padding: 10px;"><input type="checkbox" /></div>
                                <div class="row">
                                    <button class="btn btn-default">Chi tiết</button>
                                    <button class="btn btn-default">Mua ngay</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content compare-dialog">
      <table class="table">
        <tr class="success">
            <td style="width: 200px"></td>
            <td><img src="@Url.Content("~/Content/images/nhanvietlogo.jpg")" /></td>
            <td><img src="@Url.Content("~/images/prudentialogo.jpg")" /></td>
            <td><img src="@Url.Content("~/images/nhanvietlogo.jpg")" /></td>
        </tr>
        <tr>
            <td>Tên gói sản phẩm</td>
            <td>BH-BAOVIET009</td>
            <td>BH-BAOVIET009</td>
            <td>BH-BAOVIET009</td>
        </tr>
        <tr class="success">
            <td>Công ty bảo hiểm</td>
            <td>Bảo Việt</td>
            <td>Bảo Việt</td>
            <td>Bảo Việt</td>
        </tr>
        <tr>
            <td>Chương trình</td>
            <td>Số tiền bảo hiểm(dới 50 triệu đồng)</td>
            <td>Số tiền bảo hiểm(dới 50 triệu đồng)</td>
            <td>Số tiền bảo hiểm(dới 50 triệu đồng)</td>
        </tr>
        <tr class="success">
            <td>Đối Tượng</td>
            <td>Nhóm</td>
            <td>Nhóm</td>
            <td>Nhóm</td>
        </tr>
        <tr>
            <td>Phạm vi địa lý</td>
            <td>Việt Nam</td>
            <td>Việt Nam</td>
            <td>Việt Nam</td>
        </tr>

        <tr class="success"></tr>
    </table>
    </div>
  </div>
</div>